import React from "react"
import { useComponentConfigStore } from "../../stores/component-config"
import { Component, useComponetsStore } from "../../stores/components"
import { message } from "antd"

import { ActionConfig } from "../Setting/ActionModal"

export function Preview() {
  const { components } = useComponetsStore()
  const { componentConfig } = useComponentConfigStore()
  // function handleEvent(component: Component) {
  //   const props: Record<string, any> = {}

  //   componentConfig[component.name].events?.forEach((event) => {
  //     const eventConfig = component.props[event.name]

  //     if (eventConfig) {
  //       const { type } = eventConfig

  //       props[event.name] = () => {
  //         if (type === "goToLink" && eventConfig.url) {
  //           window.location.href = eventConfig.url
  //           return
  //         }
  //         if (type === "showMessage" && eventConfig.config) {
  //           if (eventConfig.config.type === "success") {
  //             message.success(eventConfig.config.text)
  //           } else if (eventConfig.config.type === "error") {
  //             message.error(eventConfig.config.text)
  //           }
  //           return
  //         }
  //       }
  //     }
  //   })
  //   console.log("aaaa", props)
  //   return props

  // }

  function handleEvent(component: Component) {
    const props: Record<string, any> = {}

    componentConfig[component.name].events?.forEach((event) => {
      const eventConfig = component.props[event.name]
      console.log("eventConfig", eventConfig)
      if (eventConfig) {
        props[event.name] = () => {
          eventConfig?.actions?.forEach((action: ActionConfig) => {
            if (action.type === "goToLink") {
              window.location.href = action.url
            } else if (action.type === "showMessage") {
              if (action.config.type === "success") {
                message.success(action.config.text)
              } else if (action.config.type === "error") {
                message.error(action.config.text)
              }
            } else if (action.type === "customJS") {
              const func = new Function("context", action.code)
              func({
                name: component.name,
                props: component.props,
                showMessage(content: string) {
                  message.success(content)
                },
              })
            }
          })
        }
      }
    })
    console.log("event", props)
    return props
  }

  function renderComponents(components: Component[]): React.ReactNode {
    return components.map((component: Component) => {
      const config = componentConfig?.[component.name]
      console.log("component", component)
      if (!config?.prod) {
        return null
      }

      return React.createElement(
        config.prod,
        {
          key: component.id,
          id: component.id,
          name: component.name,
          styles: component.styles,
          ...config.defaultProps,
          ...component.props,
          ...handleEvent(component),
        },
        renderComponents(component.children || [])
      )
    })
  }
  return <div>{renderComponents(components)}</div>
}
